<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../sass/detailPage.css">
</head>

<body>
    <!-- 顶部搜索 -->
    <div id="herder">
        <div class="container">
            <div class="herder_logo">
                <a href="#">
                    <img src="../static/images/logo.png" alt="">
                    <div class="logoFont">
                        <p>熊猫优选</p>
                        <span>XIONG MAO YOU XUAN</span>
                    </div>
                </a>
            </div>
            <div class="herder_search">
                <input type="text" name="searchcInput" placeholder="搜索商品，发现更多优惠">
                <div class="searchBtn">搜&nbsp;索</div>
            </div>
            <div class="herder_advantage">
                <ul>
                    <li>
                        <img src="../static/images/topIcon01.png" alt="">
                        <p>全程包邮</p>
                    </li>
                    <li>
                        <img src="../static/images/topIcon02.png" alt="">
                        <p>7天退换</p>
                    </li>
                    <li>
                        <img src="../static/images/topIcon03.png" alt="">
                        <p>品质保证</p>
                    </li>
                </ul>
            </div>
            <div class="getCart">
                <div class="myCart">
                    我的购物车</div>
            </div>
        </div>
    </div>
    <!-- 导航栏 -->
    <div id="nav">
        <div class="container">
            <ul>
                <li class="active" value="index">详情页</li>
            </ul>
        </div>
    </div>
    <!-- 内容区 -->
    <div id="main">

    </div>
    <!-- 回到顶部按钮 -->
    <div id="backTopBtn">
        <img src="../static/images/backTopIcon.png" alt="">
    </div>
    <!-- 底部通栏 -->
    <div id="footer">
        <div class="container">
            <div class="content">
                <img src="../static/images/logo.png" alt="">
                <div class="title">
                    <h1>熊猫优选</h1>
                    <p>年轻人网购手选<br>购物领券更省钱</p>
                </div>
                <div class="content_top_right">
                    <p>|<span>下载APP</span></p>
                </div>
            </div>
            <div class="record">
                <img src="../static/images/policeIcon.png" alt="">
                <p>浙公安网备案&nbsp;33010602009949号</p>
                <span>|</span>
                <p>ICP备案号：浙ICP备17012864号-1</p>
                <span>|</span>
                <img src="../static/images/license.png" alt="">
                <p>证照信息</p>
            </div>
        </div>
    </div>
    <!-- 认证标识 -->
    <div id="authenticationIcon">
        <a href="https://xinyong.yunaq.com/certificate?site=xiongmaoyouxuan.com">
            <img src="../static/images/authenticationIcon.png" alt="">
        </a>
    </div>
    <script src="../js/jquery-3.6.0.js"></script>
    <script src="../js/template-web.js"></script>
    <script src="../js/detailPage.js"></script>
    <script id="ProductInformation" type="text/html">
        <div class="container">
            <div class="main_top">
                <div class="product_info">
                    <div class="photos">
                        <!-- 轮播图 -->
                        <div class="pic">
                            <img src="{{data.share.imageUrl}}" width="100%" height="100%">
                            <div class="mask"></div>
                        </div>
                        <div class="picList">
                            {{each data.detail.photo}}
                            <div><img src="{{$value.url}}" alt="" class="smallPic" width="50px" height="50px"></div>
                            {{/each}}
                        </div>
                        <div class="bigGlass">
                            <img src="{{data.share.imageUrl}}" alt="" class="bgPic">
                        </div>
                    </div>
                    <div class="productDetails">
                        <div class="productDetails_title">
                            <div>

                                <p><img src="../static/images/taobaoLogo.png" alt="">
                                    <img src="../static/images/cion01.png" alt="">{{data.share.title}}</p>
                            </div>
                        </div>
                        <div class="productDetails_price">
                            <div class="original-price">
                                <p>原价￥{{data.detail.originPrice}}</p>
                            </div>
                            <div class="last-price">
                                <span>券后价:</span>
                                <div class="price">
                                    <i>￥</i>
                                    {{((data.detail.price).toString()).split('.')[0]}}
                                    <span>.{{((data.detail.price).toString()).split('.')[1]}}</span>
                                </div>
                                <div class="coupon-info">{{data.detail.couponValue}}</div>
                                <div class="sale-num">{{data.detail.saleNum}}人已买</div>
                            </div>
                        </div>
                        <div class="expire-date">
                            <p>优惠有效期：{{data.detail.expireDate}}</p>
                            <div class="shopNum">
                                <span>购买数量：</span>
                                <input type="button" name="minus" value="-" disabled>
                                <input type="text" name="amount" value="1">
                                <input type="button" name="plus" value="+">
                            </div>
                        </div>
                        <div class="addCart_goBuy">
                            <button id="addCart-btn">加入购物车</button>
                            <button id="goBuy-btn">领券购买</button>
                        </div>
                    </div>
                </div>
                <div class="shop_info">
                    <div class="storeInformation">
                        <span class="line"></span>
                        <span class="tet">卖家信息</span>
                        <span class="line"></span>
                    </div>
                    <img src="{{data.detail.shop.picUrl}}" alt="" class="shop_image">
                    <p class="shop_name">{{data.detail.shop.title}}</p>
                    <div class="shop_score">
                        <ul class="character">
                            <li>描述</li>
                            <li>服务</li>
                            <li>物流</li>
                        </ul>
                        <ul class="score">
                            <li>{{data.detail.shop.itemScore}}</li>
                            <li>{{data.detail.shop.serviceScore}}</li>
                            <li>{{data.detail.shop.deliveryScore}}</li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 详情图片 -->
            <div class="cmd_detail">
                {{each data.detail.descContentList}}
                <img src="{{$value.photo.url}}" alt="">
                {{/each}}
            </div>
        </div>
    </script>
</body>

</html>